<template>
  <view class="page">
    <!-- 顶部商品 -->
    <view class="goods-card">
      <image class="goods-img" :src="data_info.imgUrl" mode="aspectFit"></image>
      <view class="goods-info">{{data_info.czsbflmc}}</view>
    </view>

    <!-- 配送方式 -->
    <view class="section-title">
      {{data_info.ddlx}}
      <view class="title-underline"></view>
    </view>

    <!-- 时间 -->
    <view class="date-box">
      <view class="date-item">
        <text class="date-week"></text>
        <text class="date-day">{{data_info.ddkssj}}</text>
      </view>
      <view class="date-center">{{data_info.zlts}}天</view>
      <view class="date-item right">
        <text class="date-week"></text>
        <text class="date-day">{{data_info.ddjssj}}</text>
      </view>
    </view>

    <!-- 费用 -->
    <view class="fee-list">
      <view class="fee-row">
        <text class="fee-label">押　金：</text>
        <text class="fee-value">{{data_info.yjje}}元</text>
        <text class="tag-paid" v-if="data_info.ddzt != '待支付押金'">已支付</text>
      </view>
	  <view class="fee-row">
	    <text class="fee-label">订单金额：</text>
	    <text class="fee-value">{{data_info.jine}}元</text>
	  </view>
      <view class="fee-row">
        <text class="fee-label">租　金：</text>
        <text class="fee-value">{{data_info.zjje}}元</text>
      </view>
      <view class="fee-row" v-if="data_info.ddlx == '配送'">
        <text class="fee-label">配送费：</text>
        <text class="fee-value">{{data_info.psfje}}元</text>
      </view>
    </view>

    <!-- 地址 -->
    <view class="addr-box" v-if="data_info.ddlx == '配送'">
      <text class="addr-tag">送</text>
      <text class="addr-tag">送车上门</text>
      <view class="addr-info">
        <text class="addr-text">{{data_info.shdz}}</text>
        <text class="addr-user">{{data_info.shrxm}}　{{data_info.shrlxdh}}</text>
      </view>
    </view>
	<!-- 地址 - 自提点 -->
	 <view class="addr-box" v-if="data_info.ddlx == '自提'">
	  <view class="addr-header">
		<text class="addr-tag">取</text>
		<text class="addr-tag">上门提车</text>
		<text class="addr-title">福州自提点</text>
	  </view>

	  <view class="addr-info">
		<text class="addr-text">{{data_info.ztdmc}}</text>
		<view class="addr-actions">
		  <button class="addr-btn nav-btn" @tap="onNav">导航</button>
		  <button class="addr-btn phone-btn" @tap="onCall(data_info.ztddh)">拨打电话</button>
		</view>
	  </view>
	</view>
    <!-- 合计 -->
    <view class="total-box">
      <text class="tag-paid">{{data_info.ddzt}}</text>
      <text class="total-text">合计：</text>
      <text class="total-price">¥{{total2}}</text>
    </view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  data() {
    return {
      // 模拟数据，可以替换成接口返回
      orderDetail: {
        product: "折叠代步车-ModelF",
        startDate: "2025-08-01",
        endDate: "2025-08-07",
        days: 7,
        deposit: 1000,
        rent: 300,
        deliveryFee: 100,
        total2: 0,
        address: "福建省厦门市思明区厦禾路909号",
        user: "林某某",
        phone: "18888888888",
        status: "paid" ,// paid / unpaid
      },
	  rowId:'',
	  data_info:{},
	   total2: 0,
    }
  },
  onLoad(options) {
  	that = this;
  	that.rowId = options.rowid;
  	that.center = uni.getStorageSync('location_center');
  	//console.log(that.center);
  	that.center = JSON.parse(that.center);
  	that.plusReady();
  },
  methods:{
	  //初始化
	    plusReady(){
	      	userInfo = uni.getStorageSync('userInfo');
	      	if(userInfo){
	      		userInfo = JSON.parse(userInfo);
	      		that.if_login = true;
	      		that.member_profile = userInfo;
	    		that.load_datas();
	      	}else{
				uni.switchTab({
					url:'/pages/index/me'
				});
	      		that.if_login = false;
	      	}	      	
	    },
		onNav() {
			var r = (that.data_info.ztdjwd).split(',');
			//common_config.calert(r[0]);
		    // 这里模拟固定坐标，可以替换为接口返回的经纬度
		    uni.openLocation({
		      latitude: parseFloat(r[0]),  // 示例：福州
		      longitude: parseFloat(r[1]),
		      name: that.data_info.ztdmc,
		      address: that.data_info.ztdmc
		    })
		  },
		  onCall(phone) {
		    uni.makePhoneCall({
		      phoneNumber: phone
		    })
		  },
	  /*load_datas(){
	  	//console.log(121212);
	  	uni.request({
	  	  url: config.request_url+'/v2/open/worksheet/getRowByIdPost',
	  	  method: 'POST',
	  	  header: {
	  		'Content-Type': 'application/json'
	  	  },
	  	  data: {
	  		"appKey": config.appKey,
	  		"sign": config.sign,
	  		"worksheetId": "czddgl",
	  		"rowId":that.czddRowid
	  	  },
	  	  success: (res) => {
	  		//console.log('返回结果:', res.data);
	  		res = res.data;
	  		//console.log(res);
	  		if(res.success){
	  			that.data_info = res.data;
	  			
	  		}else{
	  			 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
	  		}
	  	  },
	  	  fail: (err) => {
	  		console.error('请求失败:', err);
	  		uni.showToast({ title: '网络错误', icon: 'none' });
	  	  }
	  	})  
	  },*/
	 
	  load_datas(){
	  	//console.log(121212);
	  	uni.request({
	  	  url: config.request_url+'/v2/open/worksheet/getRowByIdPost',
	  	  method: 'POST',
	  	  header: {
	  		'Content-Type': 'application/json'
	  	  },
	  	  data: {
	  		"appKey": config.appKey,
	  		"sign": config.sign,
	  		"worksheetId": "czddgl",
	  		"rowId":that.rowId
	  	  },
	  	  success: (res) => {
	  		//console.log('返回结果:', res.data);
	  		res = res.data;
	  		//console.log(res);
	  		if(res.success){
	  			that.data_info = res.data;
				
	  			that.total2 = common_config.accAdd(that.data_info.jine,that.data_info.yjje);
				//common_config.calert('test'+that.total2 );
	  		}else{
	  			 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
	  		}
	  	  },
	  	  fail: (err) => {
	  		console.error('请求失败:', err);
	  		uni.showToast({ title: '网络错误', icon: 'none' });
	  	  }
	  	})  
	  }
  }
}
</script>

<style scoped>
.page { padding: 20rpx; background-color: #f5f6f7; min-height: 100vh; }

/* 商品 */
.goods-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
.goods-img { width: 200rpx; height: 200rpx; border-radius: 12rpx; background: #f2f2f2; }
.goods-info { flex: 1; margin-left: 20rpx; font-size: 28rpx; color: #333; background: #f7f8f9; border-radius: 12rpx; padding: 40rpx 20rpx; text-align: center; }

/* 标题 */
.section-title { margin: 40rpx auto 20rpx; font-size: 32rpx; font-weight: bold; color: #222; text-align: center; position: relative; }
.title-underline { width: 40rpx; height: 6rpx; background: #1a73e8; border-radius: 3rpx; margin: 6rpx auto 0; }

/* 时间 */
.date-box { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
.date-item { display: flex; flex-direction: column; align-items: center; }
.date-week { font-size: 22rpx; color: #888; margin-bottom: 6rpx; }
.date-day { font-size: 32rpx; font-weight: 600; color: #333; }
.date-center { font-size: 28rpx; color: #666; }
.date-item.right { text-align: right; }

/* 费用 */
.fee-list { background: #fff; border-radius: 16rpx; padding: 20rpx; margin-bottom: 20rpx; }
.fee-row { display: flex; align-items: center; margin-bottom: 16rpx; }
.fee-label { width: 120rpx; font-size: 28rpx; color: #666; }
.fee-value { font-size: 28rpx; color: #333; }
.tag-paid { background: #22c55e; color: #fff; font-size: 22rpx; padding: 4rpx 14rpx; border-radius: 6rpx; margin-left: 20rpx; }

/* 地址 */
.addr-box { background: #fff; border-radius: 16rpx; padding: 20rpx; margin-bottom: 20rpx; }
.addr-tag { font-size: 22rpx; background: #1a73e8; color: #fff; padding: 4rpx 12rpx; border-radius: 6rpx; margin-right: 6rpx; }
.addr-info { margin-top: 12rpx; }
.addr-text { display: block; font-size: 28rpx; color: #333; margin-bottom: 8rpx; }
.addr-user { font-size: 26rpx; color: #666; }

/* 合计 */
.total-box { background: #fff; border-radius: 16rpx; padding: 20rpx; display: flex; align-items: center; justify-content: flex-end; }
.total-text { font-size: 28rpx; margin: 0 6rpx; color: #333; }
.total-price { font-size: 34rpx; color: #ff0000; font-weight: bold; }
.addr-box {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

/* 顶部：取/自提点标题 */
.addr-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.addr-tag {
  font-size: 22rpx;
  background: #1a73e8;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 6rpx;
}
.addr-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-left: 10rpx;
}

/* 地址信息 */
.addr-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.addr-text {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

/* 按钮组 */
.addr-actions {
  display: flex;
  gap: 12rpx;
  margin-left: 20rpx;
}
.addr-btn {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  line-height: 1.6;
  border: none;
}
.nav-btn {
  background: #1a73e8;
  color: #fff;
}
.phone-btn {
  background: #22c55e;
  color: #fff;
}

</style>
